<template class="container">
  <div class="base">
    <p>总销售额</p>
    <p>￥12899</p>
    <div>
      <p>周同比 12% <CaretUpOutlined class="top" /></p>
      <p>日同比 13% <CaretDownOutlined class="down" /></p>
    </div>
    <hr />
    <p>日销售额 12,324</p>
  </div>
  <div class="base">
    <p>访问量</p>
    <p>￥8846</p>
    <div>
      <p>周同比 12% <CaretUpOutlined class="top" /></p>
      <p>日同比 13% <CaretDownOutlined class="down" /></p>
    </div>
    <hr />
    <p>日访问量 12,324</p>
  </div>
  <div class="base">
    <p>支付笔数</p>
    <p>￥6566</p>
    <div>
      <p>周同比 12% <CaretUpOutlined class="top" /></p>
      <p>日同比 13% <CaretDownOutlined class="down" /></p>
    </div>
    <hr />
    <p>转化率 67%</p>
  </div>
  <div class="base">
    <p>运营货送效果</p>
    <p>70%</p>
    <div>
      <p>周同比 12% <CaretUpOutlined class="top" /></p>
      <p>日同比 13% <CaretDownOutlined class="down" /></p>
    </div>
    <hr />
    <p>日销售额 12324</p>
  </div>
</template>

<script setup>
import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons-vue";
</script>
<style scoped>

.base {
  width: 210px;
  height: 205px;
  /* background-color: #F5F5F5; */
  border: 1px solid #f5f5f5;
  border-radius: 5%;
  padding: 20px;
  display: inline-block;
  margin:30px 0px 30px 30px;
  box-shadow: 5px 5px 10px gray;
}
.base > p:nth-child(2) {
  font-size: 26px;
}
.top {
  color: red;
}
.down {
  color: greenyellow;
}
hr {
  color: #f5f5f5;
}
</style>
